<template>
  <div class="hello">
    <!-- 顶部链接 -->
    <div class="header" style="border:1px solid rgb(0,0,0);"> 
        <el-link :underline="false" href="https://element.eleme.io" target="_blank">磨水屏版</el-link>
        <el-link :underline="false" href="https://element.eleme.io" target="_blank">|</el-link>
        <el-link :underline="false" href="https://element.eleme.io" target="_blank">手机版</el-link>
        <el-link :underline="false" href="https://element.eleme.io" target="_blank">｜</el-link>
        <el-link v-if="name" :underline="false">{{name}}</el-link>
        <el-link v-else :underline="false"  @click="login()">登录</el-link>
    

    </div>
    <!-- 图标 -->
    <div class="imgbox">
        <img  class="imgs" src="https://weread-1258476243.file.myqcloud.com/web/wrwebnjlogic/image/search_header_logo.02fc8d01.png" alt="">
    </div>
    <!-- 搜索框 -->
    <div class="search">
      <el-form label-width="80px">
        <!-- <el-input prefix-icon="el-icon-view" ></el-input> -->
      </el-form>
    </div>
    <!-- 总榜和飙升 -->
    <div class="centorlogo">
      <el-row :gutter="20">
        <el-col :span="12">
           <div class="grid-content bg-purple">
             <img class="logo" src="https://rescdn.qqmail.com/weread/cover/ranklist.all.chart_title.1BkPxuARY8.png" alt="">
            </div>
       </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple">
            <img class="logo" src="https://rescdn.qqmail.com/weread/cover/ranklist.rising.chart_title.CnAvfyv8Ls.png" alt="">
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- ....... -->
    <div style="widht:100%;height:30px;background:#585858"></div>
    <!-- ....... -->
    <!-- 图书 -->
    <div style="background:#585858">
      <el-row :gutter="20">
       <!-- one -->
        <el-col :span="6" v-for='(item,i) in Booklist'>
          <div class="grid-content bg-purple" style="cursor:pointer;margin-top:20px" @click="lst(item.id)">
            <img src="../assets/s/s-1.png" alt="" style="position:relative;float:left">
             <div class="aa" style="width:50%;border:px solid red;float:left;margin-top:20px;color:#fff;padding-left:10px;">
                <a>{{item.name}}</a>
            </div>
            <div class="aa" style="width:50%;border:px solid red;float:left;text-align:center;color:#fff;margin-top:10px;">
                <a>{{item.auth}}</a>
            </div>
          </div>
        </el-col>
        <!-- one -->
      </el-row>
    </div>
    <!-- 查看更多 -->
    <div>
      <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark" style="text-align:center;line-height:60px;background:#585858;">
                 <a src="" style="color:#fff">查看更多》</a>
              </div>
            </el-col>
      </el-row> 
    </div>
    <!-- 查看更多 -->
    <!-- 分类榜单 -->
    <div style="">
      <el-row>
        <el-col :span="24">
          <div style="height:100px;line-height:140px;background:#585858" class="grid-content bg-purple-dark" >
              <span style="margin-left:60px;font-size:22px;color:#fff">  分类榜单</span>
          </div>
        </el-col>
      </el-row>

     <div v-for='(item,i) in catelist'>
        <el-col :span="6" style="background:rgb(88, 88, 88);border:solid rgb(88, 88, 88) 1px">
          <div class="grid-content bg-purple" style="float:left">{{item.title}}</div>
        </el-col>  
    </div>
    </div>
    <!-- 分类榜单 -->

    <!-- 底部 -->
    <div>
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark" style="font-size:12px;padding-top:100px;text-align:center;background:#585858">
            Copyright © 1998 - 2020 Tencent. All Rights Reserved.
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 底部 -->
  </div>

</template>

<script>
import { setToken, setUserName } from "../utils/auth";
import request from "../utils/request";
export default {
  data(){
    return{
        Booklist:[],
        catelist:[],
        name:''
    }
  },
  mounted() {
   let name = this.$route.query.name;
    this.name = name
    // 加载列表
    this.getHelloList();
     // 分类榜单
    this.getHelloCatenum();
  },
  methods:{
    getHelloList(){
      request({
        url: "/api/user/getHello",
        method: "post",
        data: {}
      }).then(res => {
      console.log(res)
       this.Booklist = res.list
        
      });
    },
    getHelloCatenum(){
      request({
        url: "/api/user/getHellocate",
        method: "post",
        data: {}
      }).then(res => {
      console.log(res)
       this.catelist = res.list
        
      });
    },
    login(){
      this.$router.push('/login')
    },
    lst(id){
      this.$router.push({path:'/article',query:{id:id}})
    }
}
}
</script>
<style lang="less" scoped>
.hello{
  background-color:#17181a;
}
.header{
 border: 0 solid #d4d6d8;border-radius: 0;max-width: 1332px; 
}
.el-link{
    margin-top: 20px;
    margin-right: 20px;
    font-size:16px;
    margin-left: 6px;
    font-weight: 500; 
    color: #fff;
    opacity: .7;   
   float: right; 
}
.imgbox{
      margin-top: 220px;
      width: 100%;
  
   
}
.imgs{
    display: block;
    background-size: 100%;
    margin: 0 auto;
    width: 160px;
    height: 36px;
       
}
.search{
    max-width: 840px;
    margin:60px auto;
}
.el-form{
  background: rgba(238,240,244,.1);
}


// 总榜和飙升
.centorlogo{
   width: 100%;
   background: 	#585858;
   padding-top: 60px;
}
.el-row {
    // margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
      // background: #99a9bf;
      padding-left: 60px;
      // padding: 20px 0;
      border-radius: 0;
      border: solid hsla(0,0%,100%,.05);
      border-width: 0 0 1px;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .logo{
    width: 176px;
  }
</style>
